<template>
	<view>
		<!-- 滑块视图 -->
		<scroll-view scroll-y="true" scroll-left="30rpx" style="display: inline-block;white-space: nowrap;padding-left: 30rpx;">
			<block v-for="(item, index) in list_data" :key="index">
				<view class="product" @click="goDetail(item1.actId)">
					<view class="it1"><image :src="item.skuImage"></image></view>
					<view class="it2" @click="goDetail(item.actId)">
						<text style="font-size: 30rpx;color: #1B1B1B;margin-top: 14rpx;">{{ item.spuName }}</text>
						<view class="xinren">
							<text style="margin-right: 15rpx;">新品发布</text>
							<text>新人专享</text>
						</view>
						<view style="display: flex;align-items: center;	margin-top: 20rpx;">
							<text style="font-size: 24rpx;color: #F61B00;">￥</text>
							<text style="font-size: 36rpx;color: #F61B00;">{{ item.actPrice[0] }}.{{ item.actPrice[1] }}</text>
							<text style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">{{ item.marketPrice[0] }}.{{ item.marketPrice[1] }}</text>
						</view>
					</view>
					<view class="it3"><image src="/static/shequ/add.png" style="width: 40rpx;height: 40rpx;" mode="aspectFit" @click="addCart(index)"></image></view>
				</view>
			</block>
			<view style="color: #666666;font-size: 30rpx;text-align: center;">没有更多数据了</view>
		</scroll-view>

		<view style="position: fixed; bottom:0;right:0;background-color: #FFFFFF;">
			<view style="height: 110rpx;display: flex;justify-content: space-between;">
				<view style="display: flex;width: 510rpx;justify-content: space-between;align-items: center;">
					<navigator url="/pages/shoppingCart/shoppingCart">
						<view style="padding-left: 30rpx; display: flex;align-items: center;">
							<image src="/static/shequ/cart.png" style="width: 40rpx;height: 39rpx;" mode="aspectFit"></image>
							<text style="font-size: 24rpx;color: #1B1B1B;margin-left: 10rpx;">已选{{ num }}</text>
						</view>
					</navigator>
					<text style="font-size: 20rpx;font-weight: bold;color: #F61B00;padding-right: 30rpx;">¥{{ totalPrice }}</text>
				</view>
				<!-- <navigator url="../pay/pay"> -->
					<button
						type="default"
						style="width: 240rpx;height: 110rpx;background-color: #00C657;color: #fff;font-size: 32rpx;display: flex;align-items: center;justify-content: center;border-radius: 0;"
						@click="pay"
					>
						去支付
					</button>
				<!-- </navigator> -->
			</view>
		</view>
	</view>
</template>

<script>
import { Storage } from '@/static/libs/utils.js';
export default {
	data() {
		return {
			list_data: null,
			num: 0,
			page: 1,
			totalPrice: 0,
			nav_list_data: []
		};
	},
	onLoad(option) {
		var head_id = option.cat_id ? option.cat_id : 1;
		this.token = Storage.get('token');
		this.getProductList(head_id, this.page);
	},
	methods: {
		goDetail(actId) {
			uni.navigateTo({
				//地址栏传参
				url: "/pages/sqxq/sqxq?id=" + actId + '&a=wxapp'
			})
		},
		//获取商品列表
		getProductList(head_id, page) {
			this.token = Storage.get('token');
			var that = this;
			this.$request
				.get('/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop&controller=index.load_gps_goodslist', {
					token: this.token,
					pageNum: page,
					head_id: head_id,
					per_page: 10
				})
				.then(res => {
					// console.log('团购分类信息：',res.data.list)
					if (res.data.list) {
						if (that.list_data) {
							that.list_data.concat(res.data.list);
						} else {
							that.list_data = res.data.list;
						}
						that.nowPage = page;
					} else {
						//没有数据了
					}

					this.totalPrice = this.num * item1.actPrice[0].item1.actPrice[1];
				});
		},
		addCart(index) {
			var item = this.list_data[index];

			var actPrice = item.actPrice[0] + '.' + item.actPrice[1];
			// console.log('aaa',parseFloat(item));
			var price = parseFloat(this.totalPrice) + Math.floor(parseFloat(actPrice) * 100) / 100;
			this.numFilter(price);
			// console.log(this.totalPrice);

			this.token = Storage.get('token');
			//console.log('Tokenlalalalal',this.token)
			this.$request
				.post('/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&&m=lionfish_comshop', {
					controller: 'car.add',
					token: this.token,
					goods_id: item.actId,
					community_id: 1,
					quantity: item.goods_start_count,
					buy_type: 'dan',
					is_just_addcar: 1
				})
				.then(res => {
					console.log('购物车', res);
					uni.showToast({
						title: '添加成功',
						duration: 1000
					});
					this.num = this.num + 1;
				});
		},
		numFilter(val) {
			// 截取当前数据到小数点后两位
			let tempVal = parseFloat(val).toFixed(3);
			let realVal = tempVal.substring(0, tempVal.length - 1);
			this.totalPrice = realVal;
		},
		pay() {
			uni.navigateTo({
				url: '/pages/pay/pay'
			});
		}
	}
};
</script>

<style lang="scss">
.xinren text {
	width: 100rpx;
	height: 30rpx;
	border: 1rpx solid #ff6f00;
	border-radius: 8rpx;
	font-size: 20rpx;
	color: #ff6f00;
	padding: 2rpx;
}
.product {
	width: 690rpx;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	margin-bottom: 50rpx;

	.it1 {
		width: 148rpx;
		height: 148rpx;
		background: #f7f7f7;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 120rpx;
			height: 93rpx;
		}
	}

	.it2 {
		margin-left: 30rpx;
	}

	.it3 {
		margin-right: 30rpx;
		margin-left: auto;
		margin-top: 90rpx;
	}
}
</style>
